<script setup lang="ts">
import { ref, computed, markRaw } from "vue";
import {
  User,
  TrendCharts,
  DataLine,
  Monitor,
  Setting,
  Document,
  Folder,
  Plus,
  Position,
  Sunny,
  Bell
} from "@element-plus/icons-vue";

// 用户信息
const userInfo = ref({
  name: "管理员",
  avatar: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
  role: "超级管理员",
  department: "技术部",
  loginTime: "2025-01-15 09:30:00",
  lastLoginIp: "192.168.1.100"
});

// 系统统计信息
const systemStats = ref([
  {
    title: "总用户数",
    value: "1,234",
    icon: markRaw(User),
    color: "#409EFF",
    trend: "+12%",
    trendUp: true
  },
  {
    title: "今日访问",
    value: "856",
    icon: markRaw(TrendCharts),
    color: "#67C23A",
    trend: "+5.2%",
    trendUp: true
  },
  {
    title: "系统负载",
    value: "65%",
    icon: markRaw(Monitor),
    color: "#E6A23C",
    trend: "-2.1%",
    trendUp: false
  },
  {
    title: "存储使用",
    value: "2.3TB",
    icon: markRaw(DataLine),
    color: "#F56C6C",
    trend: "+15%",
    trendUp: true
  }
]);

// 快捷功能
const quickActions = ref([
  {
    title: "用户管理",
    icon: markRaw(User),
    path: "/system/user",
    color: "#409EFF"
  },
  {
    title: "角色管理",
    icon: markRaw(Setting),
    path: "/system/role",
    color: "#67C23A"
  },
  {
    title: "菜单管理",
    icon: markRaw(Document),
    path: "/system/menu",
    color: "#E6A23C"
  },
  {
    title: "文件管理",
    icon: markRaw(Folder),
    path: "/files",
    color: "#F56C6C"
  },
  {
    title: "系统设置",
    icon: markRaw(Setting),
    path: "/settings",
    color: "#909399"
  },
  {
    title: "添加内容",
    icon: markRaw(Plus),
    path: "/add",
    color: "#606266"
  }
]);

// 平台信息
const platformInfo = ref({
  version: "v2.1.0",
  buildTime: "2025-01-15",
  environment: "生产环境",
  uptime: "15天 6小时 32分钟",
  serverInfo: {
    cpu: "3.2GHz 8核",
    memory: "32GB",
    storage: "1TB SSD",
    network: "1000Mbps"
  }
});

// 当前时间
const currentTime = ref(new Date());
setInterval(() => {
  currentTime.value = new Date();
}, 1000);

const formatTime = computed(() => {
  return currentTime.value.toLocaleString("zh-CN", {
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit"
  });
});

const formatDate = computed(() => {
  return currentTime.value.toLocaleDateString("zh-CN", {
    weekday: "long",
    year: "numeric",
    month: "long",
    day: "numeric"
  });
});

// 快捷操作点击事件
const handleQuickAction = (action: any) => {
  console.log("快捷操作:", action.title);
  // 这里可以添加路由跳转逻辑
  // router.push(action.path)
};
</script>

<template>
  <div class="home-dashboard dashboard-container">
    <!-- 头部欢迎区域 -->
    <div class="welcome-section">
      <el-row :gutter="20">
        <el-col :span="18">
          <el-card class="welcome-card">
            <div class="welcome-content">
              <div class="user-info">
                <el-avatar :size="60" :src="userInfo.avatar" />
                <div class="user-details">
                  <h2>你好，{{ userInfo.name }}！</h2>
                  <p>{{ userInfo.role }} · {{ userInfo.department }}</p>
                  <p class="login-info">
                    上次登录：{{ userInfo.loginTime }} ({{
                      userInfo.lastLoginIp
                    }})
                  </p>
                </div>
              </div>
              <div class="welcome-actions">
                <div class="button-with-badge">
                  <el-button type="primary">
                    <el-icon><Bell /></el-icon>
                    通知中心
                  </el-button>
                  <el-badge :value="5" class="notification-badge" />
                </div>
                <el-button>
                  <el-icon><Setting /></el-icon>
                  个人设置
                </el-button>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="time-card">
            <div class="time-display">
              <div class="date-info">{{ formatDate }}</div>
              <div class="current-time">{{ formatTime }}</div>
              <div class="weather-info">
                <el-icon><Sunny /></el-icon>
                <span>晴朗 · 22°C</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 统计数据区域 -->
    <div class="stats-section">
      <el-row :gutter="20">
        <el-col v-for="stat in systemStats" :key="stat.title" :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div
                class="stat-icon icon-container"
                :style="{
                  backgroundColor: stat.color + '20',
                  color: stat.color
                }"
              >
                <el-icon style="font-size: 24px">
                  <component :is="stat.icon" />
                </el-icon>
              </div>
              <div class="stat-info">
                <h3>{{ stat.value }}</h3>
                <p>{{ stat.title }}</p>
                <span
                  class="trend"
                  :class="{
                    'trend-up': stat.trendUp,
                    'trend-down': !stat.trendUp
                  }"
                >
                  {{ stat.trend }}
                </span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 主要内容区域 -->
    <el-row :gutter="20" class="main-content">
      <!-- 快捷操作 -->
      <el-col :span="12">
        <el-card class="quick-actions-card">
          <template #header>
            <div class="card-header">
              <span>快捷操作</span>
              <el-button text type="primary">更多</el-button>
            </div>
          </template>
          <div class="quick-actions">
            <div
              v-for="action in quickActions"
              :key="action.title"
              class="action-item"
              @click="handleQuickAction(action)"
            >
              <div
                class="action-icon icon-container"
                :style="{
                  backgroundColor: action.color + '20',
                  color: action.color
                }"
              >
                <el-icon style="font-size: 20px">
                  <component :is="action.icon" />
                </el-icon>
              </div>
              <span class="action-title">{{ action.title }}</span>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 平台信息 -->
      <el-col :span="12">
        <el-card class="platform-card">
          <template #header>
            <div class="card-header">
              <span>平台信息</span>
              <el-button text type="primary">系统监控</el-button>
            </div>
          </template>
          <div class="platform-content">
            <el-row :gutter="16">
              <el-col :span="12">
                <div class="info-item">
                  <h4>系统版本</h4>
                  <p>{{ platformInfo.version }}</p>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="info-item">
                  <h4>构建时间</h4>
                  <p>{{ platformInfo.buildTime }}</p>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="info-item">
                  <h4>运行环境</h4>
                  <p>{{ platformInfo.environment }}</p>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="info-item">
                  <h4>运行时长</h4>
                  <p>{{ platformInfo.uptime }}</p>
                </div>
              </el-col>
            </el-row>
            <el-divider />
            <h4 style="margin-bottom: 12px">服务器配置</h4>
            <div class="server-config">
              <div
                v-for="(value, key) in platformInfo.serverInfo"
                :key="key"
                class="server-info"
              >
                <span class="label">{{ key.toUpperCase() }}:</span>
                <span class="value">{{ value }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">
.home-dashboard {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
  padding: 8px;

  // 全局卡片阴影优化
  :deep(.el-card) {
    border-radius: 16px !important;
    border: none !important;
    box-shadow:
      2px 4px 12px var(--home-shadow-color),
      1px 2px 6px var(--home-shadow-color) !important;
    transition: all 0.3s ease !important;
    overflow: hidden;

    &:hover {
      box-shadow:
        3px 6px 16px var(--home-shadow-hover),
        2px 3px 8px var(--home-shadow-hover) !important;
      transform: translateY(-1px);
    }

    .el-card__header {
      border-bottom: 1px solid var(--home-border-color) !important;
      background-color: var(--home-bg-light);
      border-radius: 16px 16px 0 0 !important;
    }

    .el-card__body {
      border-radius: 0 0 16px 16px !important;
    }
  }

  // 各个区域之间的间距
  .welcome-section {
    margin-bottom: 20px;
  }

  .stats-section {
    margin-bottom: 20px;
  }

  .main-content {
    margin-bottom: 20px;
  }

  .welcome-section {
    .welcome-card {
      height: 140px;
      background: linear-gradient(
        135deg,
        var(--home-primary-color) 0%,
        var(--home-secondary-color) 100%
      );

      :deep(.el-card__body) {
        background: transparent;
        color: white;
      }

      .welcome-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;

        .user-info {
          display: flex;
          align-items: center;
          gap: 16px;

          .user-details {
            h2 {
              margin: 0 0 8px 0;
              color: #ffffff;
              font-size: 24px;
              text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            }

            p {
              margin: 4px 0;
              color: rgba(255, 255, 255, 0.9);
              font-size: 14px;

              &.login-info {
                color: rgba(255, 255, 255, 0.7);
                font-size: 12px;
              }
            }
          }
        }

        .welcome-actions {
          display: flex;
          gap: 12px;

          .button-with-badge {
            position: relative;
            display: inline-block;

            .notification-badge {
              position: absolute;
              top: -8px;
              right: -8px;
              z-index: 10;
            }
          }
        }
      }
    }

    .time-card {
      height: 140px;

      .time-display {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
        gap: 8px;

        .date-info {
          font-size: 14px;
          color: #606266;
          font-weight: 500;
        }

        .current-time {
          font-size: 18px;
          font-weight: bold;
          color: #303133;
        }

        .weather-info {
          display: flex;
          align-items: center;
          gap: 6px;
          color: #909399;
          font-size: 13px;
        }
      }
    }
  }

  .stats-section {
    .stat-card {
      transition: all 0.3s ease;
      background: linear-gradient(
        135deg,
        var(--home-bg-light) 0%,
        var(--home-bg-card) 100%
      );

      &:hover {
        transform: translateY(-2px) scale(1.01);
        box-shadow:
          3px 6px 16px var(--home-shadow-hover),
          2px 3px 8px var(--home-shadow-hover) !important;
      }

      .stat-content {
        display: flex;
        align-items: center;
        gap: 16px;

        .stat-icon {
          width: 50px;
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 12px;
          box-shadow: 2px 3px 8px var(--home-shadow-color);
          transition: all 0.3s ease;
        }

        .stat-info {
          flex: 1;

          h3 {
            margin: 0 0 4px 0;
            font-size: 24px;
            font-weight: bold;
            color: #303133;
          }

          p {
            margin: 0 0 8px 0;
            color: #606266;
            font-size: 14px;
          }

          .trend {
            font-size: 12px;
            padding: 2px 6px;
            border-radius: 8px;

            &.trend-up {
              background-color: #f0f9ff;
              color: #67c23a;
            }

            &.trend-down {
              background-color: #fef0f0;
              color: #f56c6c;
            }
          }
        }
      }
    }
  }

  .main-content {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .quick-actions-card {
      background: linear-gradient(
        135deg,
        var(--home-bg-lighter) 0%,
        var(--home-bg-light) 100%
      );

      .quick-actions {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        padding: 8px;

        .action-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 20px 16px;
          cursor: pointer;
          transition: all 0.3s;
          border-radius: 12px;
          border: 1px solid transparent;
          background: linear-gradient(
            135deg,
            #ffffff 0%,
            var(--home-bg-light) 100%
          );
          box-shadow: 1px 2px 6px var(--home-shadow-color);

          &:hover {
            background: linear-gradient(
              135deg,
              var(--home-bg-light) 0%,
              var(--home-bg-card) 100%
            );
            border-color: var(--home-border-color);
            transform: translateY(-2px) scale(1.01);
            box-shadow: 2px 4px 12px var(--home-shadow-hover);
          }

          .action-icon {
            width: 44px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 12px;
            transition: all 0.3s;
            border-radius: 10px;
            box-shadow: 1px 2px 6px var(--home-shadow-color);
          }

          .action-title {
            font-size: 14px;
            color: #606266;
            text-align: center;
            font-weight: 500;
          }

          &:hover .action-icon {
            transform: scale(1.1);
          }
        }
      }
    }

    .platform-card {
      height: 100%;
      background: linear-gradient(
        135deg,
        var(--home-bg-lighter) 0%,
        var(--home-bg-card) 100%
      );

      .platform-content {
        .info-item {
          text-align: center;
          padding: 16px 12px;
          margin-bottom: 8px;
          border-radius: 12px;
          background: linear-gradient(
            135deg,
            #ffffff 0%,
            var(--home-bg-light) 100%
          );
          border: 1px solid var(--home-border-color);
          transition: all 0.3s;
          box-shadow: 1px 2px 6px var(--home-shadow-color);

          &:hover {
            background: linear-gradient(
              135deg,
              var(--home-bg-light) 0%,
              var(--home-bg-card) 100%
            );
            border-color: var(--home-border-hover);
            transform: translateY(-2px);
            box-shadow: 2px 4px 12px var(--home-shadow-hover);
          }

          h4 {
            margin: 0 0 8px 0;
            color: #909399;
            font-size: 13px;
            font-weight: normal;
          }

          p {
            margin: 0;
            color: #303133;
            font-size: 15px;
            font-weight: bold;
          }
        }

        .server-config {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 12px;
          margin-top: 16px;

          .server-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            background: linear-gradient(
              135deg,
              #ffffff 0%,
              var(--home-bg-light) 100%
            );
            border-radius: 10px;
            border: 1px solid var(--home-border-color);
            transition: all 0.3s;
            box-shadow: 1px 2px 4px var(--home-shadow-color);

            &:hover {
              background: linear-gradient(
                135deg,
                var(--home-bg-light) 0%,
                var(--home-bg-card) 100%
              );
              border-color: var(--home-border-hover);
              transform: translateY(-1px);
              box-shadow: 2px 3px 8px var(--home-shadow-hover);
            }

            .label {
              color: #909399;
              font-size: 13px;
              font-weight: 500;
            }

            .value {
              color: #303133;
              font-weight: 600;
              font-size: 14px;
            }
          }
        }
      }
    }
  }
}

// 响应式布局
@media (max-width: 768px) {
  .home-dashboard {
    padding: 16px;

    .welcome-section,
    .stats-section,
    .main-content {
      margin-bottom: 16px;
    }

    .welcome-section {
      .el-col {
        width: 100%;
        margin-bottom: 12px;
      }
    }

    .stats-section {
      .el-col {
        width: 50%;
        margin-bottom: 12px;
      }
    }

    .main-content {
      .el-col {
        width: 100%;
        margin-bottom: 16px;
      }

      .quick-actions {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
      }

      .server-config {
        grid-template-columns: 1fr;
        gap: 8px;
      }
    }
  }
}

@media (max-width: 480px) {
  .home-dashboard {
    padding: 12px;

    .stats-section {
      .el-col {
        width: 100%;
        margin-bottom: 12px;
      }
    }

    .main-content {
      .quick-actions {
        grid-template-columns: 1fr;
        gap: 10px;
      }
    }
  }
}
</style>
